<template>
  <div class="layout">
    <div :style="bigScreenStyle" v-loading="loading">
      <ControllerView
        v-for="(controller, index) in controllers"
        :key="index"
        v-model="controller.value"
        :type="controller.type"
      ></ControllerView>
    </div>
  </div>
</template>


<script>
  import ControllerView from "./controller/view";
  import { getInfoByProgramCode } from "@/api/publish/mipsProgramInfo";
  import { handleInitProgramData} from "./util/common";
  import {getToolByCode} from "./config";

export default {
  name: "Preview",
  components: {ControllerView},
  // props: {
  //   curPageIndex: Number,
  // },
  data() {
    return {
      bigScreenStyle: {},
      loading: false,
      controllers:[],
      pageInfoList: [],
      curPageIndex: 0,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const programCode = this.$route.query.programCode;
      getInfoByProgramCode(programCode).then(res => {
        this.pageInfoList = handleInitProgramData(res.data, getToolByCode);
        this.controllers = this.pageInfoList[this.curPageIndex].controllerInfoList;
        const equipment = document.body.clientWidth;
        const ratioEquipment = equipment / this.pageInfoList[this.curPageIndex].width;
        this.bigScreenStyle = {
          width: this.pageInfoList[this.curPageIndex].width + "px",
          height: this.pageInfoList[this.curPageIndex].height + "px",
          "background-color": this.pageInfoList[this.curPageIndex].backgroundColor,
          "background-image": "url(" + this.pageInfoList[this.curPageIndex].backgroundImage + ")",
          "background-position": "0% 0%",
          "background-size": "100% 100%",
          "background-repeat": "initial",
          "background-attachment": "initial",
          "background-origin": "initial",
          "background-clip": "initial",
          transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
          "transform-origin": "0 0",
          border: "solid 1px red"

        };
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .layout {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .bottom-text {
    width: 100%;
    color: #a0a0a0;
    position: fixed;
    bottom: 16px;
    z-index: 9999;
  }
</style>
